Dr. Yang Ye <Email:yy@runchee.com>
Sep 10, 2019
New version in 2018.
What runs inside the cables?
TCP Session
DHCP Session
A family of protocols but what’s most famous/“fundamental” is IP and TCP.
A well-defined network protocles.
IETF (Internet Engineering Task Force) maintains and still gets new protocol approved.
Request
GET /index.html HTTP/1.1
Host: www.example.comResponse
HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Content-Type: text/html; charset=UTF-8
Content-Encoding: UTF-8
Content-Length: 138
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes
Connection: close
<html>
<head>
<title>An Example Page</title>
</head>
<body>
Hello World, this is a very simple HTML document.
</body>
</html>When you have HTML and URL (Uniform Resource Locator), Web is born.
How this resource is used in the document.
<div class="thumbinner" style="width:302px;">
<a href="/wiki/File:Web_Index.svg" class="image">
<img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/65/Web_Index.svg/300px-Web_Index.svg.png"
width="300" height="154" class="thumbimage" />
</a>
</div>
First generation
Browser => HTML/CSS/JavaScript => HTTP => TCP => IP => Network physical.
We will write in R Shiny, which subsequently output HTML/CSS/JavaScript to be run in browser.
Document stores information.
Web is a superset of interlinked documents.
HTML is a markup language, built for machines.
Markdown is for humans to write doc, with minimal added to decorate it, created by John Gruber in collaboration with Aaron Swartz in 2004.
A Markdown-formatted document should be publishable as-is, as plain text,
without looking like it's been marked up with tags or formatting instructions. - John Gruber---
title: My first bitcoin
subtitle: and how I bought a pizza!
author: "Gru"
date: "Jul 9, 2010"
---
# How I bought it
I found someone was selling _10000_ on ebay for __$30__.
I think that's
- cool
- fun
- hacker
# How I used it
I forgot to bring my wallet the other day.
So I used **the bitcoins** to buy some pizza.

More hashtag, deeper level.
# Header1
## Header2
### Header3
Give four spaces before it
if (a > 0) {
print(a)
}
if (a > 0) {
print(a)
}
* First paragraph.
Continued.
* Second paragraph. With a code block, which must be indented
eight spaces:
{ code }
First paragraph. Continued.
Second paragraph. With a code block, which must be indented eight spaces:
Put four more spaces for each level.
* fruits
+ apples
- macintosh
- red delicious
+ pears
* vegetables
+ broccoli
Put 4 more spaces for each level.
#. Chapter 1
#. Section 1.1
#. Section 1.2
#. Chapter 2
#. Chapter 3
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
To emphasize some text, surround it with *s or _, like this:
This text is \_emphasized with underscores\_, and this
is \*emphasized with asterisks\*.
Double * or _ produces strong emphasis:
This is \*\*strong emphasis\*\* and \_\_with underscores\_\_.
This text is emphasized with underscores, and this is emphasized with asterisks. Double * or _ produces strong emphasis.
This is strong emphasis and with underscores. A * or _ character surrounded by spaces, or backslash-escaped, will not trigger emphasis.
This ~~is deleted text.~~ This is deleted text.
H~2~O is a liquid. 2^10^ is 1024. H2O is a liquid. 210 is 1024.
Use backtick `. What is the difference between `>>=` and `>>`? What is the difference between >>= and >>?
Note:
A link immediately preceded by a ! will be treated as an image. The link text will be used as the image’s alt text:

Pizza
MathJax. Use laTex syntax. There are many online references.
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
$$\sum_{i=1}^n X_i$$
\[\sum_{i=1}^n X_i\]
---
title: "Data Analysis Report"
author: "Yang Ye"
date: "October 23, 2018"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## Report
```{r cars}
summary(cars)
```
## Including Plots
```{r pressure, echo=FALSE}
plot(pressure)
```
In the header, you can change the output to other types:
html_document
pdf_document
word_document
Ctrl+Shift+K or “Knitr”
R Markdown is a extension to Markdown that you can execute code among the code. If you name the file as .Rmd and knit in R Studio.
```{r Calculate_7}
a <- 3
b <- 4
print(a + b)
```
## [1] 7Calculate_7 is the chunk name. It’s optional to give a chunk name. If included, each code chunk needs a distinct name. It’s usually best to give each code chunk a name, for easier debug.
R code can also be inline. For example, to generate a random number everytime, include this `runif(1, 0, 1)`, 0.4384873.
echo is to decide whether to display code, default is FALSE.
results is to decide whether to display result, default is “markup”, set to “hide” to hide.
include is to hide both code and result, default is FALSE.
```{r cars, echo = TRUE}
a <- runif(100, 0, 1)
```
```{r plot}
plot(a)
``````{r kable}
knitr::kable(
mtcars[1:5, ],
caption = "A knitr kable."
)
```
| mpg | cyl | disp | hp | drat | wt | qsec | vs | am | gear | carb | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Mazda RX4 | 21.0 | 6 | 160 | 110 | 3.90 | 2.620 | 16.46 | 0 | 1 | 4 | 4 |
| Mazda RX4 Wag | 21.0 | 6 | 160 | 110 | 3.90 | 2.875 | 17.02 | 0 | 1 | 4 | 4 |
| Datsun 710 | 22.8 | 4 | 108 | 93 | 3.85 | 2.320 | 18.61 | 1 | 1 | 4 | 1 |
| Hornet 4 Drive | 21.4 | 6 | 258 | 110 | 3.08 | 3.215 | 19.44 | 1 | 0 | 3 | 1 |
| Hornet Sportabout | 18.7 | 8 | 360 | 175 | 3.15 | 3.440 | 17.02 | 0 | 0 | 3 | 2 |
```{r plot1, echo = FALSE}
a <- filter(cars, speed > 4)
plot(a)
```
I removed everything in functions server and ui. This is the minimal Shiny. (shiny-1-empty.R)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
Let’s add a minimal sidebarLayout (shiny-2-sidebar.R)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(sidebarLayout(
sidebarPanel("This is a panel on the side"),
mainPanel("This is the main panel")
)),
fluidPage(sidebarLayout(
sidebarPanel("This is a panel on the side"),
mainPanel("This is the main panel")
))
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
fluidPagefluidPage means to place the controls from left-right, top-down order.
fluidPage function can take any number of input parameters.
fluidPage(sidebarLayout(
sidebarPanel(),
mainPanel()
))titlePanel("Hello Shiny!"), h1("Introduction to Layout"), h2("Sidebar Layout") (shiny-3-sidebar-min.R)library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
h1("Introduction to Layout"),
h2("Sidebar Layout")
),
mainPanel(
img(src = "p19-Hero-Image-796x398.jpg")
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
fluidPage(
sidebarLayout(position = "right",
sidebarPanel(),
mainPanel()
)
)
Sidebar with more tags (shiny-3-sidebar.R)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
h1("Introduction to Layout"),
h2("Sidebar Layout"),
a("A link to Google", href="http://www.google.com"),
# unordered list
tags$ul("About",
tags$li("Who are we"),
tags$li("What we do")
),
# ordered list
tags$ol("Steps",
tags$li("Write"),
tags$li("Run")
)
),
mainPanel(
img(src = "p19-Hero-Image-796x398.jpg")
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
h1("A header")
p("some text as a paragraph")
a("A link to Google", href="http://www.google.com")
img(src = "p19-Hero-Image-796x398.jpg", width = "100%")
tags$ul("title", tags$li("Item 1"), tags$li("Item 2"))
tags$ol("Step", tags$li("Item 1"), tags$li("Item 2"))
Note:
www together with the R source file. Place the file under it.tags$img(), even img() is available to use.titlePanel() and wellPanel() (shiny-4-wellPanel.R)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
h1("Well 1"),
wellPanel(
h2("Well 1.1"),
actionButton("goButton", "Go!")
),
h1("Well 2"),
wellPanel(
h2("Well 2.1"),
actionButton("goButton2", "Go!")
)
),
mainPanel(
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
navlistPanel(
"Header A",
tabPanel("Section 1",
h1("Section 1"),
p("This is section 1. First lecture in FE8828.")),
tabPanel("Section 2",
h1("Section 2")),
"Header B",
tabPanel("Section 3",
h1("Section 3")),
"-----",
tabPanel("Component 5")
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
tabsetPanel(
tabPanel("Plot", h1("plot")),
tabPanel("Summary", h1("summary")),
tabPanel("Image", img(src = "p19-Hero-Image-796x398.jpg"))
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
ui <- fluidPage(
fluidPage(
navbarPage(title = "Runchee Technology",
tabPanel("Product",
titlePanel("Hello!"),
"One more thing!"),
tabPanel("About us",
titlePanel("Hello!"),
"Exordinary people"),
navbarMenu(title = "Contact Us",
tabPanel("Address", "3/4 platform"),
tabPanel("Phone", "+123.456")
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
ui <- fluidPage(
fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
fluidRow(
column(4,
wellPanel(
dateInput("date", "How's weather today?")
)
),
column(6,
h3("Plot"),
wellPanel(plotOutput("distPlot"))
),
column(2, h3("Extra"),
wellPanel(plotOutput("extraPlot"))
)
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
library(ggplot2)
ui <- fluidPage(
fluidPage(
fluidPage(
title = "Diamonds Explorer",
fluidRow(
column(12,
img(src = "p19-Hero-Image-796x398.jpg", width = "100%")
)
),
hr(),
fluidRow(
column(3,
h4("Diamonds Explorer"),
sliderInput('sampleSize', 'Sample Size',
min=1, max=nrow(diamonds), value=min(1000, nrow(diamonds)),
step=500, round=0),
br(),
checkboxInput('jitter', 'Jitter'),
checkboxInput('smooth', 'Smooth')
),
column(4, offset = 1,
selectInput('x', 'X', names(diamonds)),
selectInput('y', 'Y', names(diamonds), names(diamonds)[[2]]),
selectInput('color', 'Color', c('None', names(diamonds)))
),
column(4,
selectInput('facet_row', 'Facet Row', c(None='.', names(diamonds))),
selectInput('facet_col', 'Facet Column', c(None='.', names(diamonds)))
)
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
---
title: "MFE FE8828 Assignment 1"
date: 2018-11-03
output: html_document
runtime: shiny
---
```{r setup, include = FALSE}
```
# Use echo = TRUE for assignment is an exception, so code is visible.
```{r, echo = TRUE}
wellPanel("Inputs",
numericInput("fav_num", "What's your favorite number?", 3))
```
This is interactive document.